<template>
  <div :class="{ 'fullscreen': isFullscreen }" class="container mx-auto p-6 bg-gray-100 rounded-lg shadow-md">
    <h1 class="text-3xl font-bold mb-4 text-center text-blue-600">Todo List</h1>
    <input 
      v-model.trim="newTodo" 
      @keyup.enter="addTodo" 
      placeholder="Add a new todo" 
      class="border border-gray-300 p-2 w-full mb-4 rounded focus:outline-none focus:ring focus:ring-blue-500"
    />
    <button @click="toggleFullscreen" class="bg-green-500 text-white p-2 rounded hover:bg-green-600 transition duration-200">Toggle Fullscreen</button>
    <ul>
      <TodoItem 
        v-for="todo in todos" 
        :key="todo.id" 
        :todo="todo" 
        @delete="deleteTodo(todo.id)" 
        @update="updateTodo(todo.id, $event)" 
      />
    </ul>
    <div v-if="isFullscreen" class="fullscreen-display">
      <h2 class="text-2xl">当前任务:</h2>
      <p v-if="currentTask">{{ currentTask.text }} - {{ currentTask.startTime }} 到 {{ currentTask.endTime }}</p>
      <p v-else>没有当前任务</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import TodoItem from './components/TodoItem.vue';

const newTodo = ref('');
const todos = ref([]);
const isFullscreen = ref(false);
const currentTask = ref(null);

onMounted(() => {
  const storedTodos = JSON.parse(localStorage.getItem('todos'));
  if (!storedTodos || storedTodos.length === 0) {
    todos.value = [
      { id: Date.now(), text: '欢迎使用待办事项列表！', completed: false, startTime: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), endTime: new Date(new Date().getTime() + 60 * 60 * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }
    ];
    saveTodos();
  } else {
    todos.value = storedTodos;
  }
});

const addTodo = () => {
  if (newTodo.value) {
    const todo = { 
      id: Date.now(), 
      text: newTodo.value, 
      completed: false, 
      startTime: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
      endTime: new Date(new Date().getTime() + 60 * 60 * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
    };
    todos.value.push(todo);
    newTodo.value = '';
    saveTodos();
  }
};

const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
    isFullscreen.value = true;
    updateCurrentTask();
  } else {
    if (confirm("你确定要退出全屏吗？")) {
      document.exitFullscreen();
      isFullscreen.value = false;
    }
  }
};

const updateCurrentTask = () => {
  const now = new Date();
  currentTask.value = todos.value.find(todo => {
    const taskStartTime = new Date();
    taskStartTime.setHours(parseInt(todo.startTime.split(':')[0]), parseInt(todo.startTime.split(':')[1]));
    const taskEndTime = new Date();
    taskEndTime.setHours(parseInt(todo.endTime.split(':')[0]), parseInt(todo.endTime.split(':')[1]));
    return now >= taskStartTime && now < taskEndTime;
  });
};

const saveTodos = () => {
  localStorage.setItem('todos', JSON.stringify(todos.value));
};

watch(todos, updateCurrentTask);
</script>

<style scoped>
.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.fullscreen-display {
  text-align: center;
  padding: 20px;
  border: 2px solid #ddd;
  border-radius: 10px;
  background-color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>